<%@ page language="java" isELIgnored="false"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>专利协同服务平台</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/H-ui.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/regist.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.validate-1.13.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/additional-methods.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery_vlid_set.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/layer.js"></script>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$("#getPhoneCode")
								.click(
										function() {
											var phonerNumber = $("#phoneNumber")
													.val();
											var errormsg = $("#errormsg");
											errormsg
													.html("<font color='red'></font>");
											var userType = $("#userType")[0].options[$("#userType")[0].selectedIndex].value;

											if (phonerNumber != null
													&& phonerNumber != "") {
												if (userType == 0) {
													errormsg
															.html("<font color='red'>请选择您的角色类型</font>");
												} else {
													$
															.ajax({
																url : "${pageContext.request.contextPath}/researcher/valid.html",
																type : "post",
																data : {
																	"phoneNumber" : phonerNumber,
																	"userType" : userType,
																},
																dataType : "text",
																success : function(
																		data) {
																	if (data == 'fail') {
																		errormsg
																				.html("<font color='red'>该手机号还没有注册</font>");
																	} else {
																		time(this);
																	}
																}//end success
															}); //end ajax
												}
											} else {
												errormsg
														.html("<font color='red'>请输入手机号</font>");
											}
										});//end click 
						$('#password')
								.bind(
										'input propertychange',
										function() { //添加监听input值的改变事件
											var message = $("#message1");
											message
													.html("<font color='red'></font>");
											var tvalmum;
											//统计input输入字段的长度
											tvalnum = $(this).val().length;
											//如果大于8个字直接进行字符串截取
											if (tvalnum > 20) {
												message
														.html("<font color='red'>密码最大长度为20位，请重新输入</font>");
												$("#button").attr("disabled",
														"disabled");
											} else if (tvalnum < 8) {
												message
														.html("<font color='red'>密码不能少于8位字符，请重新输入</font>");
												$("#button").attr("disabled",
														"disabled");
											} else {
												$("#button").removeAttr(
														"disabled");
											}
										});

						$("#button")
								.click(
										function() {
											if ($("#forgetform").valid()) {
												var code = $("#code").val();
												var message = $("#message");
												message
														.html("<font color='red'></font>");
												var codeerrormsg = $("#errormsg");
												codeerrormsg
														.html("<font color='red'></font>");
												var userType = $("#userType")[0].options[$("#userType")[0].selectedIndex].value;
												if (userType == 0) {
													message
															.html("<font color='red'>请选择您的角色类型</font>");
												} else {
													$
															.ajax({
																type : "POST",
																url : "${pageContext.request.contextPath}/researcher/set.html",
																data : $(
																		"#forgetform")
																		.serialize()
																		+ "&userType="
																		+ userType,
																dataType : 'text',
																success : function(
																		data) {
																	if (data == "success") {
																		layer
																				.msg("找回密码成功,1s后自动跳转到首页");
																		setTimeout(
																				function() { //1s后执行 
																					window.location = "${pageContext.request.contextPath}/admin/loginUI.html";
																				},
																				1000);
																	} else if (data == "fail") {
																		codeerrormsg
																				.html("<font color='red'>验证码输入错误</font>");
																	} else if (data == "past") {
																		codeerrormsg
																				.html("<font color='red'>验证码已过期，请重新获取</font>");
																	}
																} //end success method
															});
												}
											}//end if
										});//end click
					}); //end jquery
	//按钮倒计时
	var wait = 60;
	function time(obj) {
		if (wait == 0) {
			$("#getPhoneCode").removeAttr("disabled");
			$("#getPhoneCode").val("获取验证码");
			wait = 60;
		} else {
			$("#getPhoneCode").attr("disabled", "disabled");
			$("#getPhoneCode").val(wait + "秒后重试");
			wait--;
			setTimeout(function() { //倒计时方法  
				time(obj);
			}, 1000); //间隔为1s  
		}
	}//end method
</script>
<style type="text/css">
.logo2 {
	margin-left: -40px;
	margin-top: -25px;
}
</style>
</head>
<body>

	<div id="contain" class="c_contain">
		<div id="top" class="c_top" style="background: #015AB8;">
			<!-- 标题文字 -->
			<img alt="logo2"
				src="${pageContext.request.contextPath}/images/index_logo2.png"
				class="logo2">
		</div>
		<div id="center" class="c_center">
			<div id="id_form" class="panel panel-default">
				<div class="panel-header">>>忘记密码</div>
				<form action="#" method="post"
					class="form form-horizontal responsive" id="forgetform">

					<div class="panel-body">
						<div class="row cl">
							<label class="form-label col-xs-3">选择用户角色  
							</label>
							<div class="formControls col-xs-4">
							<select  style="height:30px" id="userType">
									<option value="0" selected="selected">请选择用户角色</option>
									<c:forEach items="${dicUserTypes}" var="userType">
										<option value="${userType.typeCode}">${userType.description}</option>
									</c:forEach>
							</select></div>
						</div>
						<div class="row cl">
							<label class="form-label col-xs-3">手机：</label>
							<div class="formControls col-xs-8">
								<input style="width: 600px;" type="text" class="input-text"
									autocomplete="off" placeholder="请输入已注册的手机号" name="phoneNumber"
									id="phoneNumber">
							</div>
						</div>
						<div class="row cl">
							<label class="form-label col-xs-3">验证码：</label>
							<div class="formControls col-xs-8">
								<input style="width: 600px;" type="text" class="input-text"
									autocomplete="off" placeholder="请输入验证码" name="code" id="code" />
							</div>
						</div>
						<div class="row cl">
							<div class="formControls col-xs-8">
								<label class="form-label col-xs-3"></label> <input
									style="background: #EBEBE4; border: none; color: #333333; width: 150px; margin-left: 135px;"
									class="btn btn-primary" type="button" value="获取验证码"
									id="getPhoneCode" /> <span id="errormsg"
									style="padding-left: 20px; display: inline;"></span>
							</div>
						</div>
					</div>
					<div class="row cl">
						<label class="form-label col-xs-3">新密码：</label>
						<div class="formControls col-xs-8">
							<input style="width: 600px;" type="password" class="input-text"
								autocomplete="off" placeholder="请输入密码-长度8-20位" name="password"
								id="password">

						</div>
						<span id="message1"
							style="font-size: 13px; margin-top: -10px; margin-left: 26%;"></span>
					</div>
					<div class="row cl">
						<label class="form-label col-xs-3">确认密码：</label>
						<div class="formControls col-xs-8">
							<input style="width: 600px;" type="password" class="input-text"
								autocomplete="off" placeholder="确认密码" name="password2"
								id="password2">
						</div>
					</div>
					<div class="row cl">
						<div class="col-xs-8 col-xs-offset-3">
							<input id="button" class="btn btn-primary" type="button"
								value="&nbsp;&nbsp;提交&nbsp;&nbsp;">

						</div>
					</div>
					<span id="message"
						style="font-size: 13px; margin-top: -10px; margin-left: 26%;"></span>
				</form>
			</div>
		</div>
		<!-- center结束 -->
	</div>
</body>
</html>